
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/6/10
  Time: 21:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>管理员界面</title>
    <link rel="stylesheet" href="/css/main_style.css"/>
    <link rel="stylesheet" href="/css/root.css"/>
    <script src="/js/vue.min.js"></script>
    <script src="/js/axios.min.js"></script>
    <script>
        function del(json) {
            for(let value in json){
                if(json[value].check==true){
                    json.splice(value,1);
                    del(json);
                }
            }
        }
        function open_windows() {
            var windows=document.getElementsByClassName("windows")[0];
            var windows_background=document.getElementsByClassName("windows_background")[0];
            windows.style.display="block";
            windows_background.style.display="block";
            windows_background.style.width=document.body.clientWidth+"px";
            windows_background.style.height=document.body.clientHeight+"px";
            windows.style.left = (document.body.clientWidth - windows.scrollWidth) / 2 + "px";
            windows.style.top = (document.body.clientHeight - windows.scrollHeight) / 2 + "px";
        }
        function close_windows() {
            let windows=document.getElementsByClassName("windows")[0];
            let windows_background=document.getElementsByClassName("windows_background")[0];
            windows.style.display="none";
            windows_background.style.display="none";
        }
    </script>
</head>
<body>
<div id="navigation">
    <div class="navigation-left"><img src="/img/school.png" style="width: 170px;height: 60px;"></img></div>
    <div class="navigation-center"><a>首页</a></div>
    <div class="navigation-right">
        <div class="drop-menu" style="float:right;">
            <div class="user-menu"></div>
            <div class="drop-menu-content">
                <a href="/logout">注销登录</a>
                <a href="/rePassword">修改密码</a>
            </div>
        </div>
    </div>
</div>
<div id="broadside">
    <div class="broadside-logo">
    </div>
    <div class="broadside-menu">
    </div>
</div>
<div id="root" style="width: 70%;background-color: #FFFFFF;margin-right: 10%;float: right;padding-top: 60px;">
    <p style="font-size: 30px;margin-left: 40px;font-weight: 100">查询：</p>
    <p>学号：<input type="text" value="" v-model="select.user_id"/>
        <a>限定条件：</a>
    <select style="height:25px; width: 100px;font-size: 20px;" v-model="select.identity">
        <option value="0"><a>无</a></option>
        <option value="1"><a>学生</a></option>
        <option value="5"><a>教师</a></option>
        <option value="9"><a>管理员</a></option>
    </select>
        <button v-on:click="search_users">搜索</button>
    </p>
    <div style="margin-bottom: 10px">
        <button v-on:click="del_user">删除所选</button>
        <button onclick="open_windows()">新增用户</button>
        <a> 导入学生基本信息表（excel表）:</a><input type="file" id="list_file"/><button v-on:click="upload_users">确定导入 </button>
    </div>

    <!-- 数据展示部分-->
    <table border="0" cellspacing="1" cellpadding="4" bgcolor="#CCCCCC" class="user_list">
        <tr>
            <th><input type="checkbox" v-model="all_check"/></th>
            <th>用户账号</th>
            <th>密码</th>
            <th>身份</th>
            <th>操作</th>
        </tr>
        <tr v-for="value in users">
            <td><input type="checkbox" v-model="value.check"></td>
            <td>{{value.user.user_id}}</td>
            <td>{{value.user.password}}</td>
            <td>{{value.user.identity}}</td>
            <td><button v-on:click="reset_user(value.user.user_id)">密码重置</button></td>
        </tr>
    </table>
    <!-- 弹窗部分 -->
    <div class="windows">
        <div class="windows_header"><span>新增用户</span><span onclick="close_windows()" class="close_icon">X</span></div>
        <form class="windows_body" v-model="user">
            <table cellpadding="5">
                <tr>
                    <th><label>用户账号</label></th>
                    <td><input type="text" name="user_id" v-model="user.user_id"/></td>
                </tr>
                <tr>
                    <th><label>密码</label></th>
                    <td><input type="text" name="password" v-model="user.password"/></td>
                </tr>
                <tr>
                    <th><label>身份</label></th>
                    <td>
                        <select name="identity"  v-model="user.identity">
                            <option value="1">学生</option>
                            <option value="5">教师</option>
                        </select>
                    </td>
                </tr>
                <tr><td></td><td></td></tr>
                <tr><td colspan="2" style="text-align: center"><input type="button" v-on:click="add_user" value="确认新增"/></td></tr>
            </table>
        </form>
    </div>
</div>
<div class="windows_background"></div>

<script>
    new Vue({
        el: '#root',
        data: {
            all_check: false,
            users: [],
            user:{
                user_id:'',
                password:'123',
                identity:''
            },
            select:{
                user_id:'',
                password:'',
                identity:0
            }
        },
        watch:{
            all_check: function () {
                if(this.all_check==true){
                    for(let index in this.users){
                        this.users[index].check=true;
                    }
                }else{
                    for(let index in this.users){
                        this.users[index].check=false;
                    }
                }
                this.$forceUpdate();
            }
        },
        created:function(){
            const that=this;
            axios.get("/root/account/check").then(
                function (response) {
                    let users=response.data.data;
                    for(let user in users){
                        let value={};
                        value.user={};
                        value.user.user_id=users[user].user_id;
                        value.user.password=users[user].password;
                        if(users[user].identity==1){
                            value.user.identity="学生";
                        }
                        if(users[user].identity==5){
                            value.user.identity="教师";
                        }
                        if(users[user].identity==9){
                            value.user.identity="管理员";
                        }
                        value.check=false;
                        that.users.push(value);
                    }
                    that.$forceUpdate();
                }
            )
        },
        methods: {
            del_user:function(){
                let del_users=[];
                let users=this.users;
                for(let index in users){
                    if(users[index].check==true){
                        del_users.push(users[index].user.user_id);
                    }
                }
                axios.post("/root/account/delete",del_users).then(
                    function (response) {
                        if(response.data.code==100){
                            window.location.reload();
                        }
                        if(response.data.code==404){
                           alert(response.data.msg)
                        }
                    }
                )
            },
            add_user:function () {
                axios.post("/root/account/add",this.user).then(function (response) {
                    if(response.data.code==100){
                        window.location.reload();
                    }else {
                        alert(response.data.msg);
                    }
                })
                close_windows();
            },
            upload_users:function(){
                let file=document.getElementById("list_file");
                let formData=new FormData();
                formData.append("list_file",file.files[0]);
                axios.post("/root/account/setUserInformation",formData,{
                    headers:{'Content-Type':'multipart/form-data'}
                }).then(
                    function (response) {
                        if(response.data.code==100){
                            window.location.reload();
                        }else {
                            alert(response.data.msg);
                        }
                    }
                )
            },
            reset_user:function (user_id) {
                let user={};
                user.user_id=user_id;
                axios.post("/root/account/reSetUser",user).then(
                    function (response) {
                        if(response.data.code==100){
                            alert(response.data.msg+"刷新界面可查看");
                        }else {
                            alert(response.data.msg)
                        }
                    }
                )
            },
            search_users:function () {
                this.users.splice(0,this.users.length);
                console.log(this.users);
                const that=this;
                axios.post("/root/account/searchUsers",this.select).then(
                    function (response) {
                        if(response.data.code==100){
                            let users=response.data.data;
                            for(let user in users){
                                let value={};
                                value.user={};
                                value.user.user_id=users[user].user_id;
                                value.user.password=users[user].password;
                                if(users[user].identity==1){
                                    value.user.identity="学生";
                                }
                                if(users[user].identity==5){
                                    value.user.identity="教师";
                                }
                                if(users[user].identity==9){
                                    value.user.identity="管理员";
                                }
                                value.check=false;
                                that.users.push(value);
                            }
                            that.$forceUpdate();
                        }else {
                            alert(response.data.msg);
                        }
                    }
                )
            }
        }
    })
</script>
</body>
</html>
